import React, { useCallback } from 'react'
import Taro from '@tarojs/taro'
import { ScrollView, View, Text } from '@tarojs/components'
import { Analytic_Type } from '@CONSTANTS/analytic'

import style from './FeedTopics.module.scss'

const FeedTopicsItem = ({
  data, language, curIndex, onClick, idx
}) => {
  const { Title } = data
  const name = Title?.[language]
  const active = curIndex === idx
  const onClickItem = useCallback(e => {
    e?.stopPropagation?.()
    Taro.tracker.trackEvent(Analytic_Type.tap_topic_feed.eventId, { tapid: name })
    onClick?.(idx)
  }, [idx, name, onClick])
  return (
    <View className={style.topicsItem} onClick={onClickItem}>
      <Text className={`${style.topicsItemText} ${active ? style.activeTopicText : ''}`}>{name}</Text>
      {active && <View className={style.activeBlock} />}
    </View>
  )
}
const FeedTopics = ({
  data, curIndex, onClick, language
}) => {
  if (!(Array.isArray(data) && data.length > 0)) return null
  return (
    <View className={style.container}>
      <View className={style.leftLinear} />
      <View className={style.rightLinear} />
      <ScrollView className={style.feedTopicsScrollView} scrollX>
        <View className={style.contentScrollView}>
          {data.map((item, idx) => (
            <View className={style.topicsItemContainer} key={item?.p8Id}>
              <FeedTopicsItem data={item} idx={idx} curIndex={curIndex} onClick={onClick} language={language} />
            </View>
          ))}
        </View>
      </ScrollView>
    </View>
  )
}

export default FeedTopics
